<template>
<div>
    <div style="overflow: hidden; margin-bottom: 20px">
      <top-simple-search
        @addFun="addNewRole"
        @searchFun="queryRoleUser"
      >
        <template slot="other-button">
        <primary-button handle="qingkong"  plain @click="qingkong">清空</primary-button>
        </template>
      </top-simple-search>
      <simple-table  ref="myTable" api-fun="getRoleUser" :params="{id:id}" height="450">
        <el-table-column align="left" prop="username" label="用户名" />
        <el-table-column align="left" prop="alias" label="姓名" width="100"/>
        <el-table-column align="left" prop="identity" label="工号"/>
        <el-table-column align="left" prop="dept_name" label="部门" min-width="120" show-tooltip-when-overflow>
        </el-table-column>
        <el-table-column align="left" fixed="right" label="操作" width="80">
          <template slot-scope="{ row }">
            <delete-button @click="deleteRoleUser(row.id)"></delete-button>
          </template>
        </el-table-column>
      </simple-table>
    </div>
    <add-user-dialog
      :visible.sync="searchRoleUsers"
      :id="id"
      @reloadList="getList"
    ></add-user-dialog>
</div>
</template>

<script>
  import role from "@/api/systemManagement/role/index";
import qs from "qs";
import AddUserDialog from "./addUserDialog";
  import PrimaryButton from "@/components/Buttons/PrimaryButton";
  import simpleTable from '@/mixins/SimpleTable'
export default {
  name:"RolesUserList",
  components: {PrimaryButton, AddUserDialog },
  mixins: [simpleTable],
  props: {
    id: {
      type: Number,
      default: 0
    },
  },
  data() {
    return {
      roleUserPage: {
        count: 0,
        page: 1,
        page_num: 10,
        total: 0,
        per_page: 10
      },
      loading: false,
      searchRoleUsers: false
    };
  },
  created() {
  },
  methods: {
    qingkong(){
      this.$confirm("清空数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        role.rolesQingkong(this.id).then(res=>{
          this.msgSuccess(res.msg);
        })
      });
    },
    deptFormatter(row){
      if(row.user_dept_info_list){
        return row.user_dept_info_list.map(item=>{
          return item.name
        }).join(",")
      }else{
        return ""
      }
    },
    addNewRole() {
      this.searchRoleUsers = true;
    },
    queryRoleUser(queryRole) {
      this.$refs["myTable"].searchList({search_value:queryRole})
    },
    deleteRoleUser(dedId) {
      this.$confirm("删除该角色, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        role.deleteRoleUser(this.id, dedId).then(res => {
            this.msgSuccess("删除成功!");
            this.getList();
        });
      });
    }
  }
};
</script>
